<template>
  <div class="home">
    <Header head-title="门诊充值缴费查询" go-back="true"></Header>
    <section class="group">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="待缴费订单" name="first">
                <section class="Select">
                    <el-select v-model="value" clearable placeholder="请选择缴费医院" class="SeleHos">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="valueR" clearable placeholder="请选择就诊人">
                        <el-option v-for="item in optionsR" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </section>
                <section class="JKall Select PayCon" v-for="(item,index) in Equip" :key="index">
                  <div class="PayLeft" @click="Selected(index)">
                    <div class="center" :class="Select == index ? 'PayCircle': 'PayCirNone'">
                      <img src="../../../assets/img/right.png" alt="">
                    </div>
                  </div>
                  <div class="PayRight">
                    <section class="Select fonts">
                      <p class="fontC">处方号：110002939004923</p>
                      <p class="activecolor">待支付</p>
                    </section>
                    <section class="Select fonts">
                      <p>静脉注射【静脉采血】</p>
                      <p>3.30*1</p>
                    </section>
                    <section class="Select fonts">
                      <p>执行科室：检验科</p>
                      <!-- <p class="activecolor"></p> -->
                    </section>
                    <section class="Select fonts">
                      <p>执行地点：请在院内咨询</p>
                      <p class="activecolor">￥136.4</p>
                    </section>
                  </div>
                </section>
                <section class="gotoPay Select">
                  <p class="fonts">合计： <span class="activecolor">￥5634.12</span> </p>
                  <el-button @click="drawer = true" type="primary">结算</el-button>
                </section>
            </el-tab-pane>
            <el-tab-pane label="已缴费订单" name="second">
                 <section class="Select">
                    <el-select v-model="value" clearable placeholder="请选择缴费医院" class="SeleHos">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="valueR" clearable placeholder="请选择就诊人">
                        <el-option v-for="item in optionsR" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </section>
                <section class="JKall Select PayCon" v-for="(item,index) in Equip" :key="index">
                  <div class="PayRight">
                    <section class="Select fonts">
                      <p class="fontC">处方号：110002939004923</p>
                      <p class="activecolor">已支付 ￥136.4</p>
                    </section>
                    <section class="Select fonts">
                      <p>真空采血管</p>
                      <p>1.12*2</p>
                    </section>
                    <section class="Select fonts">
                      <p>一次性使用静脉采血器</p>
                      <p>1.04*1</p>
                    </section>
                    <section class="Select fonts">
                      <p>静脉注射【静脉采血】</p>
                      <p>3.30*1</p>
                    </section>
                    <section class="Select fonts">
                      <p>执行科室：检验科</p>
                      <!-- <p class="activecolor"></p> -->
                    </section>
                    <section class="Select fonts">
                      <p>执行地点：请在院内咨询</p>
                      <p class="activecolor">2020-02-12 10:00</p>
                    </section>
                  </div>
                </section>
            </el-tab-pane>
        </el-tabs>
    </section>
<el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" :modal="false" direction="btt" size="45%">
      <section class="SelectTan">
        <h3 class="fonts">选择充值渠道</h3>
        <section class="Select TanDiv" @click="SelectPay()">
          <div class="Select">
            <img class="TanIcon" src="../../../assets/img/wechat.png" alt="">
            <p class="fonts">选择充值渠道</p>
          </div>
          <div class="recoBg2 TanRight" v-if="SelectWe">
            <img src="../../../assets/img/right.png" alt="">
          </div>
        </section>
        <section class="Select TanDiv" @click="SelectPay1()">
          <div class="Select">
            <img class="TanIcon" src="../../../assets/img/LogoB.png" alt="">
            <p class="fonts">中国银行 尾号3727</p>
          </div>
          <div class="recoBg2 TanRight" v-if="SelectWe1">
            <img src="../../../assets/img/right.png" alt="">
          </div>
        </section>
        <section class="Select TanDiv" @click="cardPay()">
          <div class="Select">
            <img class="TanIcon" src="../../../assets/img/cardPay.png" alt="">
            <p class="fonts">添加银行卡充值</p>
          </div>
          <div class="arrow Select">
            <img src="../../../assets/img/arrow.png" alt="">
          </div>
        </section>
      </section>
      <el-button @click="drawer = true" type="primary"  style="margin-left: 16px;">
        确定充值
      </el-button>
    </el-drawer>
  </div>
</template>

<script>
import Header from '../../../components/Header'

export default {
  data () {
    return {

      activeName: 'first',
      value: '',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      valueR: '',
      optionsR: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      Select: -1,
      Equip: [
        { name: '处方号：11020299020', value: '待支付' },
        { name: '处方号：11020299020', value: '待支付' },
        { name: '处方号：11020299020', value: '待支付' }
      ],
      drawer: false,
      SelectWe: false,
      SelectWe1: false
    }
  },
  components: {
    Header
  },
  methods: {
    handleClick (tab, event) {
      // console.log(tab, event)
    },
    Selected (index) {
      this.Select = index
    },
    cardPay () {
      this.$router.push({
        path: '/PaycardPay'
      })
    },
    SelectPay () {
      this.SelectWe = true
      this.SelectWe1 = false
    },
    SelectPay1 () {
      this.SelectWe1 = true
      this.SelectWe = false
    }
  }
}
</script>

<style scoped>
.home {
    padding-top: 0.4rem;
    padding-bottom: 1rem;
}
.SeleHos {
    margin-right: 0.4rem;
}
</style>
